import './AnnexImageList.scss'
import { Http } from "../../API"
import { useMount } from "ahooks"
import { Skeleton, Empty, Image } from "antd"
import { useRequest } from "alova/client"
import { useState } from 'react'

import Masonry from "react-masonry-css"

const OpenAnnex = ({ data }) => {
    const { btnData, record } = data
    const { url, parameters, success } = btnData
    const [loading, setLoading] = useState(true)
    const [annexList, setannexList] = useState([])
    const { send } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    useMount(() => {
        const params = Object.fromEntries(parameters.map(({ file, value }) => [file, record[value]]))
        send({ url, params }).then(res => {
            setannexList(res[success.file])
            setLoading(false)
        })
    })

    return (
        <div className="AnnexImageList">
            {loading ?
                <Skeleton.Image active /> :
                annexList?.length === 0 ?
                    <Empty description='暂无数据' /> :
                    <Image.PreviewGroup >
                        <Masonry
                            breakpointCols={2}
                            className='MasonryClass'
                            columnClassName='MasonryColumn'
                        >
                            {annexList.map(item => {
                                const { url, name } = success
                                return (
                                    <div className="ImageItem" key={item.uuid}>
                                        <Image src={item[url]} />
                                        <div className="label">{item[name]}</div>
                                    </div>
                                )
                            })}
                        </Masonry>
                    </Image.PreviewGroup>
            }
        </div>
    );
};

export default OpenAnnex;